<template>
    <el-dialog v-model="visible" title="日志详情" v-bind="$attrs" @open="dialogOpen" width="50%" @closed="dialogClosed">
        <template #default>
            <el-tabs tab-position="left" class="demo-tabs" v-model="activeName">
                <el-tab-pane label="日志内容" name="content">
                    <div class="content">
                        <div class="text" v-html="logDetail.context"></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="附件资料" name="static">
                    <el-table :data="logDetail.resource" style="width: 100%" border>
                        <el-table-column label="资源id" prop="id"></el-table-column>
                        <el-table-column label="文件名" prop="name"></el-table-column>
                        <el-table-column label="上传时间" prop="uploadTime">
                            <template #default="{ row }">
                                {{ row && new Date(row.uploadTime).toLocaleString() }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="{ row }">
                                <el-button
                                    type="primary"
                                    size="default"
                                    @click="download(row.save_path, row.name)"
                                    icon="Download"
                                >
                                    下载
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-popconfirm
                    title="确认删除该日志吗？该记录不可撤销"
                    icon="WarningFilled"
                    width="200"
                    @confirm="deleteLog"
                >
                    <template #reference>
                        <!-- 该按键只有发布者和负责人有 -->
                        <el-button
                            type="danger"
                            v-if="
                                (logUser === userId || subjectStore.authority === 0) &&
                                subjectStore.currentInfo.status === 0
                            "
                        >
                            删除该日志
                        </el-button>
                    </template>
                </el-popconfirm>
                <!-- 该按键只有发布者有 -->
                <el-button
                    type="primary"
                    @click="editLog"
                    v-if="logUser === userId && subjectStore.currentInfo.status === 0"
                >
                    编辑该日志
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { defineModel } from "vue";
import { reqLogDetail, reqDeleteLog } from "@/api/log";
import { reqDownload } from "@/api/file";
import type { LogDetailResponse } from "@/api/log/type";
import { ElMessage } from "element-plus";
import useSubjectStore from "@/store/modules/subject";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const { userId } = userStore;
// 接收参数
const visible = defineModel();
interface Props {
    logId: number;
    logUser: number;
}
const prop = defineProps<Props>();
const emit = defineEmits(["delete"]);
// 选项卡的页面
const activeName = ref<string>("content");

// 日志的详情内容
const logDetail = ref<LogDetailResponse>({
    id: -1,
    context: "",
    resource: [],
});

// 获取日志详情内容
const getLogDetail = async () => {
    // 请求数据
    const res = await reqLogDetail(prop.logId);
    if (res.code === 200 && typeof res.data === "object") {
        // 赋值内容
        logDetail.value = res.data;
        logDetail.value.resource = res.data.resource;
    } else {
        ElMessage.error(res.data as string);
    }
};
// 下载文件
const download = async (save_path: string, save_name: string) => {
    const result = await reqDownload(save_path, save_name);
    if (result.code === 200) {
        ElMessage.success(result.data);
    } else {
        ElMessage.error(result.data);
    }
};

// 删除日志
const deleteLog = async () => {
    const result = await reqDeleteLog(prop.logId);
    if (result.code === 200) {
        ElMessage.success("删除成功");
        visible.value = false;
        // 告知外部删除了日志
        emit("delete");
    } else {
        ElMessage.error(result.data);
    }
};
// 获取仓库
const subjectStore = useSubjectStore();
// 点击编辑日志
const editLog = async () => {
    subjectStore.addEditLogPage(prop.logId);
    // 关闭页面
    visible.value = false;
};

// 窗口打开时的回调
const dialogOpen = async () => {
    getLogDetail();
};
// 窗口关闭时的回调
const dialogClosed = () => {
    // 重置数据
    logDetail.value = {
        id: -1,
        context: "",
        resource: [],
    };
    activeName.value = "content";
};
</script>

<style lang="scss" scoped>
.content {
    background-color: var(--el-bg-color-overlay);
    border: 1px solid var(--el-border-color-light);

    .text {
        overflow: auto;
        padding: 20px;
        border-radius: 4px;
    }
}
// 模拟descriptions中header的样式
.title {
    font-size: 16px;
    font-weight: 700;
    color: var(--el-text-color-primary);
    margin-bottom: 20px;
}

.dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>
